<template>
    <!-- 新建/修改群聊的表单 -->
    <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
        <!-- 群名称 -->
        <el-form-item label="群名称" prop="groupName">
            <el-input maxlength="150" placeholder="请输入群名称" v-model="formData.groupName"></el-input>
        </el-form-item>
        <!-- 群封面 -->
        <el-form-item label="封面" prop="avatarFile">
            <AvatarUpload v-model="formData.avatarFile" ref="avatarUploadRef" @avatarCover="saveCover"></AvatarUpload>
        </el-form-item>
        <!-- 加入权限 -->
        <el-form-item label="加入权限" prop="joinType">
            <el-radio-group v-model="formData.joinType">
                <el-radio value="JOIN_WITH_CONFIRMATION">需群主同意后加入</el-radio>
                <el-radio value="JOIN_DIRECTLY">可直接加入</el-radio>
            </el-radio-group>
        </el-form-item>
        <!-- 群公告 -->
        <el-form-item label="群公告" prop="notice">
            <el-input clearable type="textarea" :rows="5" maxlength="300" :show-word-limit="true" resize="none"
                placeholder="请输入群公告" v-model="formData.groupNotice"></el-input>
        </el-form-item>
        <!-- 创建/修改群聊 -->
        <el-form-item>
            <el-button type="primary" @click="submit">{{ formData.groupId ? '修改群聊' : '创建群聊' }}</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();

const formData = ref({});
const formDataRef = ref();
const rules = {
    groupName: [{ required: true, message: "请输入群名称" }],
    joinType: [{ required: true, message: "请选择加入权限" }],
    avatarFile: [{ required: true, message: "请上传群封面" }]
};

import { useContactStateStore } from "@/stores/ContactStateStore";
const contactStateStore = useContactStateStore();
import { useAvatarInfoStore } from "@/stores/AvatarInfoStore";
const avatarInfoStore = useAvatarInfoStore();

// 修改成功后需要让父组件也更新信息
const emit = defineEmits(["editBack"]);
const submit = () => {
    contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let params = {};
        Object.assign(params, formData.value);
        if (params.avatarFile == groupId.value) {
            // 如果没有修改封面，则不发送
            delete params.avatarFile
        }
        avatarInfoStore.setForceReload(params.groupId, false)
        let result = await proxy.Request({
            method: "post",
            url: proxy.Api.saveGroup,
            params,
        });
        if (!result) {
            return;
        }
        if (params.groupId) {
            // 有传入groupId，说明是修改群聊
            proxy.Message.success("群聊信息修改成功");
            // 父组件修改信息
            emit("editBack");
        }
        else {
            proxy.Message.success("群聊创建成功");
        }
        formDataRef.value.resetFields();
        // 更新自己创建的群聊的列表信息
        contactStateStore.setContactReload("MY_GROUP");
        // 重新加载图像
        avatarInfoStore.setForceReload(params.groupId, true)
    });
}

const groupId = ref('');
/* 外面调用show函数时根据传入的data填充表单内容 */
const show = (data) => {
    formDataRef.value.resetFields()
    formData.value = Object.assign({}, data)
    groupId.value = data.groupId
    formData.value.avatarFile = groupId.value
    // console.log(formData.value.joinType)
    // formData.value.avatarFile = data.groupId
}

defineExpose({
    show,
})

const saveCover = ({ avatarFile, coverFile }) => {
    formData.value.avatarFile = avatarFile;
    formData.value.coverFile = coverFile
};
</script>

<style lang="scss" scoped></style>
